<template>
  <div class="deliveryman-pos">
    <!--    添加菜品-->
    <form class="form-inline">
      <!--      @submit.prevent="onFormSubmit"-->
      <div class="input-group mb-2 mr-sm-2">
        <!-- 输入框的前缀 -->
        <div class="input-group-prepend">
          <div class="input-group-text">姓名</div>
        </div>
        <!-- 文本输入框 -->
        <input type="text" class="form-control" placeholder="请填写配送员姓名" style="width: 356px;" v-model.trim="InputDeliveryman.name" />

        <div class="input-group-prepend">
          <div class="input-group-text">手机号</div>
        </div>
        <input type="text" class="form-control" placeholder="请填写配送员手机号" style="width: 356px;" v-model.trim="InputDeliveryman.phoneNumber" />

        <div class="input-group-prepend">
          <div class="input-group-text">身份证号</div>
        </div>
        <input type="text" class="form-control" placeholder="请填写配送员身份证号" style="width: 356px;" v-model.trim="InputDeliveryman.idNumber" />
      </div>
      <!-- 添加按钮 -->
      <button type="submit" class="btn btn-primary mb-2" @click.prevent="insertDeliveryman">添加配送员
      </button>
    </form>

  </div>
  <div>
    <table class="table">
      <thead>
      <tr>

        <th scope="col">#</th>
        <th scope="col">姓名</th>
        <th scope="col">手机号</th>
        <th scope="col">身份证号</th>
        <th scope="col">工作状态</th>

      </tr>
      </thead>
      <tbody>
      <tr v-for="(item, index) in DeliveryList" :key="item.phoneNumber">
        <th scope="row">{{++index}}</th>
        <td>
          <div class="btn btn-primary"  style="width: 70px">{{item.name}}</div>
<!--          <input class="btn btn-primary" :placeholder="item.name" v-model="item.name" style="width: 150px">-->
<!--          <button type="button" class="btn btn-primary" @click.prevent="updateDeliverymanName(item)">更新</button>-->
        </td>
        <td>
          <div class="btn btn-primary"  style="width: 200px">{{item.phoneNumber}}</div>
<!--          <input class="btn btn-primary" :placeholder="item.phoneNumber" v-model="item.phoneNumber">-->
<!--          <button type="button" class="btn btn-primary" @click.prevent="updateDeliverymanPhoneNumber(item)">更新</button>-->
        </td>
        <td>
          <input class="btn btn-primary" :placeholder="item.idNumber" v-model="item.idNumber" style="width: 400px">
          <button type="button" class="btn btn-primary" @click.prevent="updateDeliverymanIdNumber(item)">更新</button>
        </td>
        <td>
          <div class="btn btn-primary"  style="width: 90px">{{item.situation ? "已接单" : "空闲中"}}</div>
          <button type="button" class="btn btn-primary" @click.prevent="updateSituation(item)">更新</button>
        </td>
        <td><button type="submit" class="btn btn-primary mb-2" style="background-color: red;border: none" @click.prevent="deleteDeliveryman(item)">删除人员</button></td>
      </tr>

      </tbody>
    </table>



  </div>
</template>



<script>
export default {
  name: 'Deliveryman',
  data() {
    return {
      InputDeliveryman: {
        phoneNumber: "",
        name: "",
        idNumber: "",
        merchantPhoneNumber: "",
      },

      DeliveryList: []

    }
  },

  methods: {
    async getDeliveryman() {
      const {data: res} = await this.$http.get('/deliveryman/deliverymanList?phoneNumber='+localStorage.getItem("username_M"))
      this.DeliveryList=res.data
    },

    async insertDeliveryman() {
      this.InputDeliveryman.merchantPhoneNumber=localStorage.getItem("username_M")
      const {data: res} = await this.$http.post('/deliveryman/insertDeliveryman',this.InputDeliveryman)
      await this.getDeliveryman()
    },

    // async updateDeliverymanName(item) {
    //   const {data: res} = await this.$http.get('/deliveryman/updateDeliverymanName?phoneNumber='+item.phoneNumber+
    //                                                '&name='+item.name)
    //   await this.getDeliveryman()
    // },


    async updateDeliverymanIdNumber(item) {
      const {data: res} = await this.$http.get('/deliveryman/updateDeliverymanIdNumber?phoneNumber='+item.phoneNumber+
          '&idNumber='+item.idNumber)
      await this.getDeliveryman()
    },

    async updateSituation(item) {
      if (item.situation===1){
        item.situation=0;
      }
      else item.situation=1;
      const {data: res} = await this.$http.get('/deliveryman/updateSituation?phoneNumber='+item.phoneNumber+
          '&situation='+item.situation)
      await this.getDeliveryman()
    },

    async deleteDeliveryman(item) {
      console.log(item.phoneNumber)
      const {data: res} = await this.$http.get('/deliveryman/deleteDeliveryman?phoneNumber='+item.phoneNumber)
      await this.getDeliveryman();
    }

  },




  created() {
    this.getDeliveryman()

  },


}
</script>

<style lang="less" scoped>
.deliveryman-pos{
  margin: 0 auto;
  width: 1000px;
  height: 200px;
  border: 50px solid white;

}
</style>
